<template>
    <div class="page_main">
        <div class="content">
            <div class="details">
                <div class="header">员工资料及申请详情</div>
                <div class="hang">
                    <div class="title">员工</div>
                    <div class="content">{{ ruleinfo?.staff }}</div>
                </div>
                <div class="hang">
                    <div class="title">酒店名称</div>
                    <div class="content">{{ ruleinfo?.hotel_name }}</div>
                </div>
                <div class="hang">
                    <div class="title">所属部门岗位</div>
                    <div class="content">{{ ruleinfo?.depart_name }}</div>
                </div>
                <div class="hang">
                    <div class="title">应用名称</div>
                    <div class="content">{{ ruleinfo?.app_name }}</div>
                </div>
                <div class="hang">
                    <div class="title">原有角色</div>
                    <div class="content">{{ ruleinfo?.original_character }}</div>
                </div>
                <div class="hang">
                    <div class="title">本次新增角色</div>
                    <div class="content">{{ ruleinfo?.changes_add }}</div>
                </div>
                <div class="hang">
                    <div class="title">本次删除角色</div>
                    <div class="content">{{ ruleinfo?.changes_del }}</div>
                </div>
                <div class="hang">
                    <div class="title">备注</div>
                    <div class="content">{{ ruleinfo?.remark }}</div>
                </div>
                <div class="hang">
                    <div class="title">申请人</div>
                    <div class="content">{{ ruleinfo?.apply_user_name }}</div>
                </div>
                <div class="hang">
                    <div class="title">申请时间</div>
                    <div class="content">{{ ruleinfo?.apply_time }}</div>
                </div>
            </div>
            <div class="approvalOpinion">
                <van-field
                    v-model="approvalRemark"
                    class="input"
                    rows="7"
                    autosize
                    type="textarea"
                    placeholder="审批意见（非必填）"
                />
            </div>
        </div>
        <div class="btn_box">
            <div class="btn_no" :class="{ btn_disabled: isDisabled }" @click="handleExamineAndApprove('REJECTED')">
                驳回
            </div>
            <div class="btn_yes" :class="{ btn_disabled: isDisabled }" @click="handleExamineAndApprove('APPROVED')">
                同意
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { get_amp_rule, amp_rule_approve } from "@/api/permissionRequest/index.js";
import { showLoadingToast, showToast } from "vant";

/**
 *获取地址栏参数
 * @param variable string 参数名称
 * @returns string 参数值
 */
const getQueryVariable = (variable) => {
    const search = window.location.search || window.location.hash.split("?")[1] || "";
    const params = new URLSearchParams(search);
    return params.get(variable);
};

//存储信息
const ruleinfo = ref("");

//审批备注
const approvalRemark = ref("");

//是否禁用按钮
const isDisabled = ref(false);

/**
 * 点击驳回或者同意事件
 * @param val string reject | approve
 */
const handleExamineAndApprove = async (val) => {
    if (isDisabled.value) {
        showToast({
            message: "请勿重复提交",
            duration: 1500,
        });
        return;
    }

    let slt = "";
    try {
        slt = showLoadingToast({
            message: "加载中...",
            duration: 0,
            forbidClick: true,
        });
        const res = await amp_rule_approve({
            request_id: getQueryVariable("request_id"),
            apply_res: val,
            apply_remark: approvalRemark.value,
        });
        slt.close();
        showToast({
            message: res.msg,
            duration: 1500,
        });

        //禁用按钮
        isDisabled.value = true;
    } catch (err) {
        slt.close();
    }
};

//获取员工资料及申请详情
const get_rule = async () => {
    let slt = "";
    try {
        slt = showLoadingToast({
            message: "加载中...",
            duration: 0,
            forbidClick: true,
        });
        const res = await get_amp_rule({ request_id: getQueryVariable("request_id") });
        ruleinfo.value = res.data;

        //如果有备注 则回显
        if (res.data.apply_remark) {
            approvalRemark.value = res.data.apply_remark;
        }

        //是否禁用按钮
        if (res.data.apply_res) {
            isDisabled.value = true;
        }

        slt.close();
    } catch (err) {
        slt.close();
    }
};

onMounted(() => {
    get_rule();
});
</script>
<style lang="scss" scoped>
.page_main {
    width: 100%;
    height: 100vh;
    background-image: url("@/assets/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 30px 20px;
    position: relative;

    .content {
        width: 100%;
        height: calc(100% - 160px);
        overflow: auto;

        .details {
            width: 100%;
            height: max-content;
            background-color: #ffffff;
            border-radius: 30px;
            padding: 40px;

            .header {
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 36px;
                color: #1f4456;
            }

            .hang {
                width: 100%;
                display: flex;
                margin-top: 30px;
                line-height: 39px;
                word-break: break-all;
                .title {
                    width: 180px;
                    color: #999999;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 28px;
                    color: #747c80;
                }

                .content {
                    flex: 1;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 28px;
                    color: #1e1e1e;
                }
            }
        }

        .approvalOpinion {
            width: 100%;
            height: 430px;
            background: #ffffff;
            border-radius: 30px;
            margin-top: 20px;
            padding: 20px;

            .input {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 28px;
                color: #999999;
                line-height: 48px;
            }
        }
    }

    .btn_box {
        width: 100%;
        height: 160px;
        background: #ffffff;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .btn_no,
        .btn_yes {
            width: 335px;
            height: 90px;
            background: #ffffff;
            border-radius: 20px;
            border: 1px solid #e8542c;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28px;
            color: #e8542c;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn_yes {
            border: 1px solid #224448;
            background: #224448;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28px;
            color: #ffffff;
        }

        .btn_disabled {
            border: 1px solid #cccccc;
            background: #cccccc;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28px;
            color: #ffffff;
        }
    }
}
</style>
